<template>
    <div class="container">
        <div class="flex-box-align" style="padding-bottom: 20px;border-bottom: 1px solid #f4f4f4">
            <div class="flex">新增电子病例</div>
        </div>

        <ul class="case-info flex">
            <li>
                <span>姓名：</span>
                <span>{{name}}</span>
            </li>
            <li>
                <span>年龄：</span>
                <el-input type="text" :maxlength="3" style="width: 200px" value="number" v-model="age" placeholder="请输入"></el-input>
            </li>
            <li>
                <span>性别：</span>
                <el-radio v-model="sex" label="1">男</el-radio>
                <el-radio v-model="sex" label="0">女</el-radio>
            </li>
            <li class="flex-box-align">
                <span>病情自述：</span>
                <el-input type="textarea" autosize :maxlength="500" style="width: 200px" v-model="description" placeholder="请输入"></el-input>
            </li>
            <li class="flex-box-align">
                <span>CT片：</span>
                <el-upload
                        class="avatar-uploader"
                        :action="upLoadUrl"
                        :show-file-list="false"
                        :on-success="handleCtSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="ct.img" :src="ct.img" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </li>
            <li class="flex-box-align">
                <span>检查结果：</span>
                <el-upload
                        class="avatar-uploader"
                        :action="upLoadUrl"
                        :show-file-list="false"
                        :on-success="handleCheckSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="check.img" :src="check.img" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </li>
            <li class="flex-box-align">
                <span>检查处方：</span>
                <el-upload
                        class="avatar-uploader"
                        :action="upLoadUrl"
                        :show-file-list="false"
                        :on-success="handleRecipeSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="recipe.img" :src="recipe.img" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </li>
        </ul>
        <div  style="margin-top: 40px;text-align: center;width:400px">
            <el-button type="primary" @click="handleClickSave">保存</el-button>
            <el-button type="primary" @click="$router.back(-1)">返回</el-button>
        </div>
    </div>
</template>

<script>
    let CONSTANT = require('../../constant/constant.js');
    let common = require("../../common.js");
    import {parseUrlParams} from "../../util";

    export default {
        data() {
            return {
                name: '',
                upLoadUrl: "",
                showDetail: true,
                list: [],

                description: "",
                age: null,
                sex: "1",
                ct: {
                    ctPhotoId: "",
                    img: ""
                },
                check: {
                    checkResultPhotoId: "",
                    img: ""
                },
                recipe: {
                    recipePhotoId: "",
                    img: ""
                },
            }
        },
        components: {

        },
        mounted() {
            let sessionId = common.getCookie('sessionId');
            this.upLoadUrl = CONSTANT.URL.COMMON.UPLOAD + '?sessionId='+sessionId;
            this.name = decodeURI(parseUrlParams("name"))
        },
        methods: {
            handleCtSuccess(res, file) {
                this.ct.ctPhotoId = res.data.bussData.fileId;
                this.ct.img = res.data.bussData.fileUrl;
            },
            handleCheckSuccess(res, file) {
                this.check.checkResultPhotoId = res.data.bussData.fileId;
                this.check.img = res.data.bussData.fileUrl;
            },
            handleRecipeSuccess(res, file) {
                this.recipe.recipePhotoId = res.data.bussData.fileId;
                this.recipe.img = res.data.bussData.fileUrl;
            },
            beforeAvatarUpload(file) {

            },
            handleClickSave() {
                if (!this.age) {
                    this.$message.error('请填写年龄');
                    return false
                }
                if (!this.description) {
                    this.$message.error('请输入病情自述');
                    return false
                }
                if (!this.ct.ctPhotoId) {
                    this.$message.error('请上传CT片');
                    return false
                }
                if (!this.check.checkResultPhotoId) {
                    this.$message.error('请上传检查结果');
                    return false
                }
                if (!this.recipe.recipePhotoId) {
                    this.$message.error('请上传检查处方');
                    return false
                }
                let params = {
                    sex: this.sex,
                    age: this.age,
                    description: this.description,
                    ctPhotoId: this.ct.ctPhotoId,
                    checkResultPhotoId: this.check.checkResultPhotoId,
                    recipePhotoId: this.recipe.recipePhotoId,
                    patientId: parseUrlParams("id")
                }
                common.requestAjax(CONSTANT.URL.PATIENT.CASEEDIT, JSON.stringify(params), {}, (res) => {
                    if (res.status == 200) {
                        this.$message({
                            type: "success",
                            message: res.msg
                        })
                        this.$router.back(-1)
                    }
                })
            }
        }
    }
</script>

<style lang="scss">
    .container {
        .case-info {
            li {
                margin-top: 20px;
            }
            li>span:nth-child(1) {
                display: inline-block;
                width: 200px;
            }

            .avatar-uploader .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }
            .avatar-uploader .el-upload:hover {
                border-color: #409EFF;
            }
            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 150px;
                height: 150px;
                line-height: 150px;
                text-align: center;
            }
            .avatar {
                width: 150px;
                height: 150px;
                display: block;
            }
        }


    }
</style>
